<template>
  <div>
    <el-row class="samples-info-box">
      <el-col style="position:relative" :span="12">
        <div style="height: 290px;width:520px;margin:0 auto;">
          <span class="ec_title">合同数量: {{ pieChart.contractNum }}</span>
          <div ref="contract_num" style="height: 290px;width:520px;margin:0 auto;"
          /></div>
      </el-col>
      <el-col style="position:relative" :span="12">
        <div style="height: 290px;width:520px;margin:0 auto;">
          <span class="ec_title">
            合同金额: {{(Number(pieChart.contractTotalMoney).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')}}</span>
          <div ref="chart_amount" style="height: 290px;width:520px;margin:0 auto;"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  const echarts = require('echarts/lib/echarts')
  // 引入柱状图
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/chart/bar'
  // 引入提示框和标题组件
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/legend'
  export default {
    props: {
      pieChart: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        contract_num: undefined,
        chart_amount: undefined,
        amountObj: [],
        numObj: []
      }
    },
    watch: {
      pieChart: {
        handler: function (val, oldval) {
            this.getObj()
        },
        immediate: true, // 关键
        deep: true
      }
    },
    activated() {
      // this.isActive = true
      // this.setOpt_num()
      // this.setOpt_amount()
    },
    methods: {
      // 把数据规整规整
      getObj() {
        this.amountObj = [{
            value: this.pieChart.million,
            name: '1亿以上'
          },
          {
            value: this.pieChart.oneMillion,
            name: '1亿以内'
          },
          {
            value: this.pieChart.fiveThousandWan,
            name: '5000万以内'
          },
          {
            value: this.pieChart.thousandWan,
            name: '1000万以内'
          },
          {
            value: this.pieChart.fiveHundredWan,
            name: '500万以内'
          },
          {
            value: this.pieChart.hundredWan,
            name: '100万以内'
          },
          {
            value: this.pieChart.fiftyWan,
            name: '50万以内'
          }
        ]
        this.numObj = [{
            value: this.pieChart.contractDaPercent,
            name: '单项贸易合同'
          },
          {
            value: this.pieChart.contractBaPercent,
            name: '单项采购合同'
          },
          {
            value: this.pieChart.contractDaPercent,
            name: '单项委托合同'
          },
          {
            value: this.pieChart.contractAaPercent,
            name: '单项收入合同'
          },
          {
            value: this.pieChart.contractDbPercent,
            name: '项目委托合同'
          },
          {
            value: this.pieChart.contractCbPercent,
            name: '项目分包合同'
          },
          {
            value: this.pieChart.contractBbPercent,
            name: '项目采购合同'
          },
          {
            value: this.pieChart.contractAbPercent,
            name: '项目收入合同'
          }
        ]
        this.setOpt_num()
        this.setOpt_amount()
      },
      // 合同金额
      setOpt_amount() {
         this.$nextTick(() => {
        if (!this.chart_amount) {
          this.chart_amount = echarts.init(this.$refs.chart_amount)
        }
        // console.log(echarts.getMap('china'))
        //   var color = ['#ff8c53', '#a1d75f', '#75d7fe', '#5ea5f3', '#f781e1', '#ed6b6b', '#ffb120', '#00e7d7']

        const option = {
          color: ['#ff8c53', '#02affc', '#a1d75f', '#75d7fe', '#f781e1', '#ee6c6c', '#ffb121'],
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {d}%'
          },
          legend: {

            type: 'plain',
            orient: 'horizontal',
            x: 'center',
            y: 'bottom',
            //   itemGap: '10',
            align: 'auto',
            data: ['1亿以上', '1亿以内', '5000万以内', '1000万以内', '500万以内', '100万以内', '50万以内']
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            center: ['50%', '125'],
            radius: ['0', '100'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.amountObj
          }]
        }

        console.log('option', option)

        this.chart_amount.setOption(option)
         })
      },
      // 合同数量
      setOpt_num() {
        this.$nextTick(() => {
        if (!this.contract_num) {
          this.contract_num = echarts.init(this.$refs.contract_num)
        }
        // console.log(echarts.getMap('china'))
        //   var color = ['#ff8c53', '#a1d75f', '#75d7fe', '#5ea5f3', '#f781e1', '#ed6b6b', '#ffb120', '#00e7d7']

        const option = {
          color: ['#ff8c53', '#a1d75f', '#75d7fe', '#5ea5f3', '#f781e1', '#ed6b6b', '#ffb120', '#00e7d7'],
          tooltip: {
            trigger: 'item',
            formatter: '{b} : {d}%'
          },
          legend: {
            type: 'plain',
            orient: 'horizontal',
            x: 'center',
            y: 'bottom',
            bottom: '0',
            align: 'auto',
            //   itemGap: '10',
            data: ['单项贸易合同', '单项采购合同', '单项委托合同', '单项收入合同', '项目委托合同', '项目分包合同', '项目采购合同', '项目收入合同']
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            center: ['50%', '125'],
            radius: ['63', '100'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.numObj
          }]
        }

        console.log('option', option)

        this.contract_num.setOption(option)
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
  .ec_title {
    position: absolute;
    text-indent: 36px;
  }

</style>
